<template>
  <!-- 左侧菜单 -->
  <div class="left-toolbar">
    <div class="unable-style" v-if="!isAble"></div>
    <ul>
      <div v-for="(i, index) in left_iconfont" :key="i.icon" @click="iconClick(i.type)">
        <div v-if="i.divider" style="height:1px; width:100%;  background-color: darkgray;" />

        <li :class="selectedShapeId == index? 'active': '' ">
          <el-tooltip :content="i.tip" placement="right" effect="dark">
            <i class="iconfont">{{i.icon}}</i>
          </el-tooltip>
        </li>
      </div>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    isAble: false,
  },
  data: function () {
    return {
      left_iconfont: [
        {
          icon: "\ue6b6",
          type: 0,
          tip: this.$t("message.cadViewer.leftShapeSelect.select"),
        },
        {
          icon: "\ue6be",
          type: 1,
          tip: this.$t("message.cadViewer.leftShapeSelect.line"),
        },
        {
          icon: "\ue6bd",
          type: 2,
          tip: this.$t("message.cadViewer.leftShapeSelect.polyline"),
        },
        {
          icon: "\ue6bf",
          type: 3,
          tip: this.$t("message.cadViewer.leftShapeSelect.polygon"),
        },
        {
          icon: "\ue6bb",
          type: 4,
          tip: this.$t("message.cadViewer.leftShapeSelect.rect"),
        },
        {
          icon: "\ue6bc",
          type: 5,
          tip: this.$t("message.cadViewer.leftShapeSelect.fillRect"),
        },
        {
          icon: "\ue6ba",
          type: 6,
          tip: this.$t("message.cadViewer.leftShapeSelect.ellipse"),
        },
        {
          icon: "\ue6b5",
          type: 7,
          tip: this.$t("message.cadViewer.leftShapeSelect.arc"),
        },
        {
          icon: "\ue6c0",
          type: 8,
          tip: this.$t("message.cadViewer.leftShapeSelect.handDraw"),
        },
        {
          icon: "\ue6b8",
          type: 9,
          tip: this.$t("message.cadViewer.leftShapeSelect.cloud"),
        },
        {
          icon: "\ue6b7",
          type: 10,
          tip: this.$t("message.cadViewer.leftShapeSelect.text"),
        },
        {
          icon: "\ue6c1",
          type: 11,
          tip: this.$t("message.cadViewer.leftShapeSelect.mark"),
        },
        // 荧光笔
        // {
        //   icon: "\ud6bb",
        //   type: 12,
        //   tip: this.$t("message.cadViewer.leftShapeSelect.highlight"),
        // },
        //  球标
        // {
        //   divider: true,
        //   icon: "\ue6e7",
        //   type: 13,
        //   tip: this.$t("message.cadViewer.leftShapeSelect.ballcircle"),
        // },
        // {
        //   icon: "\ue6f7",
        //   type: 14,
        //   tip: this.$t("message.cadViewer.leftShapeSelect.ballrect"),
        // },
        // {
        //   icon: "\ue4f7",
        //   type: 15,
        //   tip: this.$t("message.cadViewer.leftShapeSelect.balltriangle"),
        // },
        // {
        //   icon: "\ue3b7",
        //   type: 16,
        //   tip: this.$t("message.cadViewer.leftShapeSelect.balldiamond"),
        // },
      ],
      selectedShapeId: 0,
    };
  },
  methods: {
    iconClick(e) {
      if (e >= 13) return;
      this.selectedShapeId = e;
      this.$emit("handleSelectChange", {
        selectedShapeId: this.selectedShapeId,
      });
    },
  },
};
</script>
<style   lang="scss" scoped>
.left-toolbar {
  width: 47px;
  height: 100%;
  background: rgba(245, 245, 245, 1);
  border-right: 1px solid #b4b4b4;
  display: flex;
  flex-direction: column;
  align-items: center;

  .unable-style {
    position: absolute;
    width: 47px;
    height: 100%;
    background: rgba(100, 100, 100, 0.5);
  }

  ul {
    margin-top: 12px;
    overflow: hidden;
    li {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 32px;
      margin: 8px 0;
      .iconfont {
        font-size: 24px;
        cursor: pointer;
        color: rgb(89, 89, 89);
      }
    }
    .active {
      display: flex;
      flex-direction: column;
      background: rgba(220, 220, 220, 1);
      border-radius: 4px;
      border: 1px solid rgba(189, 189, 189, 1);
    }
  }
}
</style>